<template>
  <div>
    <div class="detail-container page-container">
      <div class="top">
        <div class="border"></div>
        <div class="title">{{title}}</div>
        <div class="name item flex-start" v-for="(item,index) in toxicityItem"
          :key="index">
          <span>{{item.key}}：</span>
          <span class="content"
            >{{item.value}}</span
          >
        </div>
      </div>
      <div class="bottom card_wrap">
        <div class="card_item" 
          v-for="(item, index) in list"
          :key="index"
          @click="goToDetail(item)" >
          <div class="son card_item2">
            <div class="img"></div>
            <div class="name">
              <div class="tit">{{item.molecular_formula}}</div>
              <div class="time">{{item.punchem_cid}}</div>
            </div>
          </div>
        </div>
        

        <p v-if="list.length == 0"
          style="text-align: center;color: #999;width:100%">
          No Data
        </p>
      </div>
      <Pagination
        :pageNo="pageNo"
        :total="total"
        :pageSize="pageSize"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      title:'',
      pageNo: 1, // 分页
      total: 0,
      pageSize: 10,
      list: [],
      toxicityItem: []
    };
  },
  created() {
    
  },
  beforeRouteEnter(to, from, next) {
    if(to.query&&to.query.toxicityId){
      next((vm) => { // 查询毒性信息
        vm.title = 'Toxicity Category'
        vm.getToxicityDetailData();
      })
    }else if(to.query&&to.query.featureId){
      next((vm) => { // 查询特征信息
        vm.title = 'Multi-Dim Feature'
        vm.getFeatureDetailData()
      })
    }
  },
  methods: {
    // 获取 toxicity 详情
    getToxicityDetailData() {
      this.$api
        .getToxicityDetails({
          toxicityId: this.$route.query.toxicityId,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
        })
        .then((res) => {
          this.total = res.total;
          this.list = res.list;
        });

      this.$api
        .getToxicityDetailsInfo({
          toxicityId: this.$route.query.toxicityId,
        })
        .then((res) => {
          let arr = [];
          for (let key in res) {
            if (key != "id" && key != "pid") {
              arr.push({
                key: key,
                value: res[key]
              });
            }
          }
          this.toxicityItem = arr;
        });
    },
    // 获取Multi-Dim Feature 详情
    getFeatureDetailData(){
      this.$api.getFeatureDetails({
        featureId: this.$route.query.featureId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      })
      .then((res) => {
        console.log(res,'特征')
        this.total = res.total;
        this.list = res.list;
      });

    this.$api
      .getFeatureDetailsInfo({
        featureId: this.$route.query.featureId,
      })
      .then((res) => {
        let arr = [];
        for (let key in res) {
          if (key != "id" && key != "pid") {
            arr.push({
              key: key,
              value: res[key]
            });
          }
        }
        this.toxicityItem = arr;
      });
    },
    goToDetail(item) {
      // 化合物id  taid
      this.$router.push({ 
        path: "/searchCompoundResult",
        query: { id: item.taid }, 
      });
    },
    handleCurrentChange(data) {
      this.pageNo = data;
      // this.getToxicityCategoryInfo({});
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  margin: 0 auto;
  margin-top: 24px;
  width: 1340px;
  .top {
    position: relative;
    // padding-left: 10px;
    // height: 218px;
    padding-bottom: 10px;
    background: linear-gradient(331deg, #f9f6ff 0%, #ffffff 100%);
    border-radius: 2px 2px 0px 0px;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      background-image: url(~@/assets/img/home_bg3.png);
      background-repeat: no-repeat;
      background-size: 304px 192px;
      background-position: right bottom;
    }

    .border {
      height: 6px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      border-radius: 2px 2px 0px 0px;
    }
    .title {
      padding-left: 10px;
      padding-top: 20px;
      padding-bottom: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #17233d;
      line-height: 24px;
    }
    .item {
      padding-left: 10px;
      padding-top: 10px;
      font-size: 14px;
      color: #808695;
      span{
        line-height: 24px;
      }
      .content {
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        color: #34373b;
        
        font-weight: bold;
      }
    }
    
  }
  .bottom {
    margin-top: 16px;
    flex-wrap: wrap;
    .son {
      width: 210px;
      // height: 210px;
      // background: #ffffff;
      border-radius: 2px;
      cursor: pointer;
      &:hover{
        box-shadow: 0px 2px 8px 0px rgba(20, 47, 99, 0.16);
      }
      .img {
        height: 133px;
        background: #ffffff;
        background-image: url(~@/assets/img/icon1.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .name {
        background: #f8f8f9;
        // padding-top: 1px;
        // padding-bottom: 1px;
        overflow: hidden;
        .tit {
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          color: #17233d;
          line-height: 22px;
          margin: 10px 0;
        }
        .time {
          text-align: center;
          font-size: 14px;
          font-family: Helvetica;
          color: #6e5bfe;
          margin: 10px 0 15px 0;
        }
      }
    }
  }
}
// 响应式设计

@media screen and (max-width: 768px) {
  .detail-container {
    width: 100%;
    padding: 0 6px;
    .top {
      width: 100%;
    }
    .bottom {
      width: 100%;
      padding: 0 20px;
    }
  }
}
</style>
